<script setup lang="ts">
import { ref, computed } from 'vue'
import { useGuessList } from '@/composables'
// import  XtxGuess from '../../XtxGuess'
import { onLoad, onPageScroll } from '@dcloudio/uni-app'
// #ifdef MP-WEIXIN

import UniDrawer from '../../components/uni-drawer/uni-drawer.vue'
// #endif
import { getBannerAPI, getCategoryAPI, getListAPI, getTopicListAPI } from '@/services/shouye'
import { gethonidanAPI } from '@/services/shequ'
import { guanzhuStore, myStore, ShouyeStore } from '@/stores'
import { nextTick } from 'vue'
const nianji1 = ShouyeStore()
const activeIndex = ref(0)
const user = myStore()
const namenianji = ref('')
// 获取轮播图数据
const bannerList = ref<any>([])
const getHomeBannerData = async (data) => {
  data = nianji1.nianji
  const res = await getBannerAPI(data)
  console.log(data, '轮播图数据')

  bannerList.value = res.data
  if (data === '1') {
    namenianji.value = '小学'
  }
  if (data === '2') {
    namenianji.value = '初中'
  }
  if (data === '3') {
    namenianji.value = '高中'
  }
}

// 获取前台分类数据
const fenleitu = ref<any>([])
const categoryList = ref<any>([])
const getHomeCategoryData = async () => {
  const res = await getCategoryAPI()
  console.log(res.data, '分类数据')

  fenleitu.value = res.data
}
// 话题数据
const topicList = ref<any>([
  {
    cover: '../../static/assets/img/nothing.png',
    title: '话题名称',
    desc: '话题描述',
    today_count: 0,
    news_count: 10,
  },
  {
    cover: '../../static/assets/img/nothing.png',
    title: '话题名称',
    desc: '话题描述',
    today_count: 0,
    news_count: 10,
  },
  {
    cover: '../../static/assets/img/nothing.png',
    title: '话题名称',
    desc: '话题描述',
    today_count: 0,
    news_count: 10,
  },
  {
    cover: '../../static/assets/img/nothing.png',
    title: '话题名称',
    desc: '话题描述',
    today_count: 0,
    news_count: 10,
  },
  {
    cover: '../../static/assets/img/nothing.png',
    title: '话题名称',
    desc: '话题描述',
    today_count: 0,
    news_count: 10,
  },
])
// 获取话题数据
const getTopicList = async () => {
  let res = await getTopicListAPI()
  console.log(res, '话题数据')
  topicList.value = res.data
}

// 获取轮播图对应跳转页面
const goInfo = (uid: number) => {
  uni.navigateTo({
    url: `/pagesA/info/index?uid=${uid}`,
  })
}
// 在线测试跳转页面
const goExam = () => {
  uni.switchTab({
    url: '../cheshi/index',
  })
}
//跳转社区入口页面
const goSearch = () => {
  uni.switchTab({
    url: '../category/category',
  })
}
// 当 swiper 下标发生变化时触发
const onChange: UniHelper.SwiperOnChange = (ev) => {
  activeIndex.value = ev.detail.current
}

// 搜索
const keyword = ref<any>('')
const searcBlog = () => {
  console.log('搜索博客')
  uni.navigateTo({
    url: `/pagesA/search/index?keyword=${keyword.value}`,
  })
}
// 年级获取
const nianji11 = ref('')
// 页面加载
// 是否加载中标记  =====================================================》》》》
const isLoading = ref(false)
// ==========================================================================
onLoad(async (e: any) => {
  // 先标记false  后面标记true
  uni.showLoading({
    title: '搜索中',
  })
  nianji11.value = e.nianji
  uni.hideLoading()
  isLoading.value = false
  await Promise.all([getHomeBannerData(e.nianji), getHomeCategoryData(), getTopicList()])
  isLoading.value = false
  let res1 = await gethonidanAPI({ user: user.userinfo })
  console.log(res1, '红点数据')
  if (res1.data[0].isread == 'false') {
    uni.showTabBarRedDot({
      index: 1,
    })
  }

  // uni.hideLoading();
})
// // 滚动触发事件生命周期
// const falg = ref<any>(true)
// onPageScroll((res) => {
//   console.log(res) // 打印滚动距离

//   console.log('页面滚动了') // 打印页面滚动信息
//   if (res.scrollTop > 150) {
//     // 如果滚动距离大于100
//     falg.value = false // 设置标志为false
//   } else {
//     falg.value = true // 设置标志为true
//   }
//   // uni.$emit('onPageScroll', res.scrollTop) // 触发滚动事件并传递滚动距离
// })

// 固定定位计算
// 定义变量并赋初始值
const marginTop = ref(80)
// 计算属性，计算marginTop的值
const customMargin = computed(() => {
  return marginTop.value
})

// 触发scroll-view的滚动事件/////////////////////////////////////////////////////////////////////////////////////
const animationData = ref<any>({})
const animationData1 = ref<any>({})
const animation1 = ref<any>('')
const opacityStyle = ref<any>(1)
const opacityStyle1 = ref<any>(0)
const specClass = ref<any>('show')
const displayStyle = ref<any>('flex')
const navheight = ref<any>(100)
const falg = ref(true)
const navh = ref<any>(150)
const scrollTop1 = ref<any>(0)
const scrollTop2 = ref<any>(0)
const scrollTop3 = ref<any>(0)
const toView = ref<any>('')
const daxiao = ref<any>(0)
// 改变收缩的粘性高度
const changeHeight = ref<any>(0)

// // 写的是触摸的实现///////////////////////////////////////////////////////////////////////////////////
// const handletouchstart = () => {
//   console.log('触摸开始')
// }
// const handletouchend = () => {
//   console.log('触摸结束')
// }
// 实现动画效果，渐变效果
var animation = uni.createAnimation({
  duration: 500, //动画持续时间
  timingFunction: 'ease', //动画运动的样式，此处是均速
}) // 触发滚动事件并传递滚动距离
const Scroll1 = async (e) => {
  console.log(e)
  toView.value = ''
  console.log(e.detail.scrollTop, '滚动高度')
  console.log(e.detail.deltaY, '滚动高度实际')

  scrollTop2.value = e.detail.scrollTop
  scrollTop3.value = e.detail.deltaY
  // 计算元素和位置滚动距离
  if (
    e.detail.deltaY < 2 &&
    e.detail.scrollTop + e.detail.deltaY >= 0 &&
    e.detail.scrollTop + e.detail.deltaY < 80
  ) {
    falg.value = false
  } else {
    falg.value = true
  }
  // 进行向上拉的刷新会出现bug  判断进行执行
  if (falg.value == false) {
    opacityStyle.value = 1
    await animation.scale(1, 1).step()
    animationData.value = animation.export()
  }
  console.log(changeHeight.value, '高度是')

  // console.log(e.detail.scrollTop / 150)
  // console.log(opacityStyle.value)
  if (e.detail.scrollTop >= 150 && falg.value === true) {
    console.log(opacityStyle1.value, '大于150的')

    specClass.value = 'hide'
    displayStyle.value = 'none'
    navheight.value = 20

    falg.value = false // 设置标志为false
    if (!gaodu.value) {
      opacityStyle1.value = e.detail.scrollTop / 150 > 1 ? 1 : e.detail.scrollTop / 150
      console.log(e.detail.scrollTop, '新高度 订单')
    } else {
      navh.value = 150 - e.detail.scrollTop
      if (e.detail.scrollTop > 150) {
        navh.value = 0
      }
      specClass.value = 'show'
      console.log('急急急急急急')
    }

    console.log('经理里1111')

    console.log(e.detail.scrollTop, '新高度 1111订单')
    gaodu.value = false
    animation1.value = animation
    console.log(opacityStyle1.value, '大于150的2')
    console.log(navh.value, '这个高度是')

    if (opacityStyle.value != 0) {
      navh.value = 150 - e.detail.scrollTop
      if (e.detail.scrollTop > 150) {
        navh.value = 0
      }
      animation.scale(1, 1).step()
      animationData1.value = animation.export()
      opacityStyle.value = 0
    }
    // animation1.value = animation
    // animation.scaleY(1).step()
    //变换背景色和透明度（从0到1）
    //导出动画，就是让动画动起来
  } else if (e.detail.scrollTop >= 0 && e.detail.scrollTop < 150 && falg.value === true) {
    console.log(opacityStyle1.value, '小于150的')
    navh.value = 150 - e.detail.scrollTop
    if (e.detail.scrollTop > 150) {
      navh.value = 0
    }

    specClass.value = 'show'
    displayStyle.value = 'flex'
    opacityStyle.value = e.detail.scrollTop / 150 > 1 ? 1 : 1 - e.detail.scrollTop / 150
    console.log(opacityStyle1.value, '小于150的2')
    //  // 实现切图1的从大到小动画
    await animation.scale(opacityStyle.value, opacityStyle.value).step()

    if (opacityStyle.value < 1 && falg.value === true) {
      opacityStyle1.value = e.detail.scrollTop / 150 > 1 ? 1 : e.detail.scrollTop / 150
      console.log(e.detail.scrollTop)
      if (opacityStyle1.value < 0.3) {
        opacityStyle1.value = 0
      }
      // if (e.detail.scrollTop < 5) {
      //   falg.value = true // 设置标志为false
      // }
    }
    if (e.detail.scrollTop < 100) {
      console.log('经理里')

      animation.scale(1, 1).step()

      opacityStyle.value = 1
      opacityStyle1.value = 0
    }
    //导出动画，就是让动画动起来
    animationData.value = animation.export()
  }
  // 实现切图2的从小到大动画
  if (e.detail.scrollTop > 40 && e.detail.scrollTop <= 150 && falg.value === true) {
    daxiao.value = opacityStyle1.value
    await animation.scale(daxiao.value, daxiao.value).step()
    animationData1.value = animation.export()
  }

  // // 计算高度
  // if (e.detail.scrollTop > 150) {
  //   marginTop.value = 0
  // } else {
  //   marginTop.value = 100
  // }
  //计算出一个滚动位置
  // if (e.detail.scrollTop > 80 && e.detail.scrollTop < 150) {
  //   scrollTop1.value = 150
  // } else if(e.detail.scrollTop <80 && e.detail.scrollTop > 0) {
  //   scrollTop1.value = 0
  // }
}
// 手松开 触发的函数
const end = async () => {
  console.log(scrollTop1.value, '定位高度1')
  console.log(scrollTop2.value, '实际高度2')
  console.log(scrollTop3.value, '实际高度3')

  // 计算元素和位置滚动距离
  if (
    scrollTop3.value < 0 &&
    scrollTop2.value + scrollTop3.value >= 0 &&
    scrollTop2.value + scrollTop3.value < 80
  ) {
    falg.value = false
  } else {
    falg.value = true
  }

  // 判断滚动高度，并设置新的滚动位置
  if (scrollTop2.value > 100 && scrollTop2.value <= 1500 && falg.value === true) {
    toView.value = 'item2'
    console.log(opacityStyle1.value, '查看大小')
    console.log('item2实现')

    await animation.scale(1, 1).step()
    animationData1.value = animation.export()
  } else if (scrollTop2.value < 100 && falg.value === true) {
    console.log('item1 实现')

    toView.value = 'item1'
  }
  if (scrollTop2.value < 100 && scrollTop3.value < 0 && falg.value === true) {
    console.log('item3 实现')
    toView.value = 'item1'
  } else if (
    scrollTop2.value > 100 &&
    scrollTop2.value <= 1500 &&
    scrollTop3.value < 0 &&
    falg.value === true
  ) {
    toView.value = 'item2'
    await animation.scale(1, 1).step()
    animationData1.value = animation.export()
  }

  // 判断透明度，并设置透明度为0
  if (opacityStyle1.value != 0 && scrollTop2.value <= 140) {
    console.log('透明了')

    opacityStyle1.value = 0
  }

  // if (scrollTop2.value > 0) navh.value = 100 - scrollTop2.value

  // if (scrollTop2.value > 100) {
  //   navh.value = 0
  // }
  console.log(scrollTop1.value, '新高度')
  console.log(opacityStyle1.value, '新值')

  // 等待浏览器更新DOM
  await nextTick()
}

const end11 = async (e) => {
  console.log('触发了scrolltoupper')
}
// 跳转 按钮滚动事件
const gaodu = ref(false)
const queren = async () => {
  console.log('确认')

  toView.value = 'item1'

  // 判断透明度，并设置透明度为0
  if (opacityStyle1.value != 0 && scrollTop2.value <= 580) {
    opacityStyle1.value = 0
    opacityStyle.value = 1
    gaodu.value = true
    falg.value = true
  }
  console.log(opacityStyle1.value, '切图2')
  console.log(opacityStyle.value, '切图1')
  navh.value = 150
  scrollTop1.value = 0
}
///////////////////////////////////////////////////////////////////////////////////////////////////////////

// ///////////////////////////////////////////////////////////////////////////////////////////////////////////
// 猜你喜欢组合式函数调用
const { guessRef } = useGuessList()
const currentPage = ref(1)
const pageSize = ref(10)
const newBlogData = ref<any>([])
const total = ref(0)
const isEnd = ref(false)
const loading = ref(false)
const isCard = ref(false)
const fristData = ref([])
// 当前下拉刷新状态
const isTriggered = ref(false)
// 自定义下拉刷新被触发
const onRefresherrefresh = async () => {
  // 开始动画

  isTriggered.value = true
  fristData.value = []
  newBlogData.value = []
  console.log('下拉刷新了')
  changeHeight.value = -120
  // console.log(111111)
  // await animation.scale(1,1).step()
  // animationData.value = animation.export()
  // 重置猜你喜欢组件数据
  // await Promise.all([getHomeBannerData(), getHomeCategoryData()])
  // 关闭动画
  isTriggered.value = false
}
// 上拉加载
// const onScrolltolower = async () => {
//   console.log('上拉加载数据', newBlogData.value.length, total.value)
//   if (newBlogData.value.length >= total.value) {
//     uni.showToast({
//       icon: 'none',
//       title: '没有更多数据了',
//     })
//     return
//   }
//   // 加载数据
//   await Promise.all([
//     getHomeBannerData(),
//     getHomeCategoryData(),
//     getGuessList({
//       currentPage: currentPage.value + 1,
//       pageSize: pageSize.value,
//     }),
//   ])
// }
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// 做抽屉函数判断
const showLeft1 = ref<any>({ showLeft: false })
const showLeft = ref<any>(null)
const showDrawer = (e) => {
  console.log(e.mingchen, '333333')
  if (e.mingchen == '全部功能') {
    showLeft.value.open()
  } else if (e.mingchen == '计算器') {
    uni.navigateTo({
      url: '../../pagesA/jishuanqi/index',
    })
  } else if (e.mingchen == '英语翻译') {
    uni.navigateTo({
      url: '../../pagesA/Translation/index',
    })
  } else if (e.mingchen == '作文批改') {
    uni.navigateTo({
      url: '../../pagesA/zw-takephoto/index',
    })
  } else if (e.mingchen == '古文诗词') {
    uni.navigateTo({
      url: '../../pagesA/guwenshici/index?nianji=' + nianji1.nianji,
    })
  } else if (e.mingchen == '错题本') {
    uni.navigateTo({
      url: '../../pagesB/ks_cuoti/index',
    })
  } else if (e.mingchen == '英语单词') {
    uni.navigateTo({
      url: '../../pagesB/em_word/index',
    })
  } else if (e.mingchen == '英语听力') {
    uni.navigateTo({
      url: '../../pagesB/sy_tingli/index',
    })
  } else if (e.mingchen == 'VIP专区') {
    uni.navigateTo({
      url: '../../pagesB/huiyuanzhuanqu/index',
    })
  } else if (e.mingchen == '下载') {
    uni.navigateTo({
      url: '../../pagesB/sy_xiazai/index',
    })
  }
}
const change = (e, type) => {
  console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'))
  showLeft1.value[type] = e
}

// 跳转到话题详情页
const godetail = (id, item) => {
  uni.navigateTo({
    url: '/pagesA/topic-detail/index?detail=' + JSON.stringify(item) + '&id=' + (id + 1),
  })
}
// 拍照搜题函数
const tapOpenCamera = () => {
  // 跳转页面拍照的
  uni.navigateTo({
    url: '/pagesA/take-photo/index',
  })
}
// 跳转年级页面
const nianjii = () => {
  uni.navigateTo({
    url: '../../pagesA/xuanzhe/index',
  })
}
</script>

<template>
  <!-- 滚动容器 -->
  <scroll-view
    :scroll-into-view="toView"
    refresher-enabled
    @refresherrefresh="onRefresherrefresh"
    :refresher-triggered="isTriggered"
    @scrolltolower="onScrolltolower"
    class="scroll-view"
    :scroll-y="true"
    :scroll-top="scrollTop1"
    @scroll="Scroll1"
    @touchend="end"
    :show-scrollbar="true"
    @scrolltoupper="end11"
    upper-threshold="0"
  >
    <view id="item1">
      <!-- 轮播图 -->
      <view class="carousel">
        <swiper :circular="true" :autoplay="true" :interval="3000" @change="onChange">
          <swiper-item v-for="(item, index) in bannerList" :key="item.id" @tap="goInfo(index)">
            <navigator hover-class="none" class="navigator">
              <image class="image" :src="item.img"></image>
            </navigator>
          </swiper-item>
        </swiper>
        <!-- 指示点 -->
        <view class="indicator">
          <text
            v-for="(item, index) in 3"
            :key="index"
            class="dot"
            :class="{ active: index === activeIndex }"
          ></text>
        </view>
      </view>
      <!-- 粘性定位 -->
      <view
        :style="`position: sticky; top: ${changeHeight}rpx; z-index: 3; background-color: #fff`"
      >
        <view>
          <!-- 搜索 -->
          <view class="cu-bar search bg-white" id="item2">
            <view class="action" @tap="nianjii">
              <view class="icon iconfont icon-nianji" style="font-size: 40rpx"> </view>
              <view style="font-size: 20rpx"> {{ namenianji }}</view>
            </view>
            <view class="search-form round">
              <text class="cuIcon-search"></text>
              <input
                v-model="keyword"
                :adjust-position="false"
                type="text"
                placeholder="搜索题目"
                confirm-type="search"
                @tap="searcBlog"
              />
            </view>
            <view class="action">
              <text
                class="icon iconfont icon-paizhao"
                style="font-size: 60rpx"
                @tap="tapOpenCamera"
              ></text>
            </view>
          </view>
          <!-- 分类 -->
          <!-- 切换图1 -->
          <view :animation="animationData" :style="`height:${navh}px;  `">
            <!-- 在这里创建一个能够水平滚动的组件，类名为scrollv -->

            <view class="category" :class="specClass" :style="`opacity: ${opacityStyle};`">
              <!-- 在这里创建一个类名为category的view组件 -->
              <view
                class="category-item"
                hover-class="none"
                v-for="(item, index) in fenleitu"
                :key="index"
                @tap="showDrawer(item)"
              >
                <!-- 在这里创建一个循环遍历的类名为category-item的navigator组件，v-for指令指定遍历的次数为10次，:key属性指定遍历的key值为index -->
                <image class="icon" :src="item.img" style="width: 50rpx; height: 50rpx"></image>
                <!-- 在这里创建一个类名为icon的image组件，显示图片路径为../../static/tabs/cart_default.png -->

                <text class="text">{{ item.mingchen }}</text>
              </view>
            </view>
          </view>
          <!-- 切换图2 -->
          <view
            :style="
              opacityStyle1 == 0
                ? `opacity: ${opacityStyle1};display: none;`
                : `opacity: ${opacityStyle1};display: block;`
            "
            :class="specClass"
            :animation="animationData1"
          >
            <view class="tutu">
              <scroll-view :scroll-x="true" class="nav-content">
                <text class="icon iconfont icon-xiala yanse" @tap="queren"></text>
                <view
                  class="nav-item"
                  v-for="(item, index) in fenleitu"
                  :key="index"
                  @tap="showDrawer(item)"
                >
                  <image
                    class="icon"
                    :src="item.img"
                    style="width: 50rpx; height: 50rpx; margin-top: 15rpx"
                  ></image>
                  <text class="text">{{ item.mingchen }}</text>
                </view>
              </scroll-view>
            </view>
          </view>
        </view>
        <!-- 在这里创建一个view组件，用于包裹一个scroll-view组件，类名为category -->
      </view>
      <!-- 抽屉组件 -->
      <UniDrawer ref="showLeft" mode="left" :width="320" @change="true"> </UniDrawer>
      <!-- 多余组件 -->
      <view style="margin-top: 30rpx">
        <scroll-view scroll-y>
          <view class="duoyu">
            <!-- 选择图片 -->
            <view class="quick-list" :style="{ marginTop: `10px` }">
              <view class="quick-item search" @click="goSearch">
                <view class="title">社区讨论</view>
                <view class="summary">欢迎各位来到社区</view>
                <view class="btn">去社区</view>
              </view>
              <view class="quick-item interview" @click="goExam">
                <view class="title">在线测试</view>
                <view class="summary">测试你学的怎么样了</view>
                <view class="btn">去测试</view>
              </view>
            </view>
            <!-- 最近更新 -->
            <view class="huati">最近更新的话题</view>
            <!-- 话题列表组件 -->
            <view
              class="huatiliebiao"
              v-for="(item, index) in topicList"
              :key="index"
              @tap="godetail(index, item)"
            >
              <image
                :src="item.titlepic"
                mode="scaleToFill"
                style="width: 150rpx; height: 150rpx; border-radius: 8rpx; margin-right: 20rpx"
              />
              <view class="neiron">
                <text style="font-size: 35rpx; color: #343a40">{{ item.title }}#</text>
                <text style="color: #6c757d; font-size: 30rpx">{{ item.desc }}</text>
                <view class="huatixiam">
                  <text style="margin-right: 20rpx">动态:{{ item.news_count }}</text>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
    <!-- <button @tap="queren">置顶</button> -->
  </scroll-view>
</template>

<style lang="scss">
//
@import url('../../static/assets/wxss/iconfont.css');
page {
  background-color: #fff;
  // 这里设置会导致  微信小程序取消了默认滚动条
  height: 100%;
  display: flex;
  flex-direction: column;
}
.scroll-view {
  height: 100%;
  flex: 1;
}
/* 轮播图 */
.carousel {
  height: 450rpx;
  position: relative;
  overflow: hidden;
  transform: translateY(0);
  background-color: #efefef;
  .indicator {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16rpx;
    display: flex;
    justify-content: center;
    .dot {
      width: 30rpx;
      height: 6rpx;
      margin: 0 8rpx;
      border-radius: 6rpx;
      background-color: rgba(122, 105, 207, 0.4);
    }
    .active {
      background-color: #0931d3;
    }
  }
  .navigator,
  .image {
    width: 100%;
    height: 100%;
  }
}

// 选择图片
.quick-list {
  display: flex;

  .quick-item {
    width: 100%;
    margin: 10px 5px;
    border-radius: 5px;
    padding: 15px;
    color: #fff;

    .title {
      font-weight: bold;
    }

    .summary {
      font-size: 14px;
      margin-top: 2px;
    }

    .btn {
      margin-top: 10px;
      float: left;
      font-size: 12px;
      border-radius: 5px;
      padding: 4px 10px 4px 10px;
    }
  }

  .search {
    background: linear-gradient(to right, rgb(0, 225, 255), pink);

    .btn {
      background: linear-gradient(to right, rgb(0, 225, 255), rgb(192, 255, 217));
    }
  }

  .interview {
    background: linear-gradient(to right, rgb(0, 225, 255), rgb(227, 192, 255));
    .btn {
      background: linear-gradient(to right, rgb(0, 225, 255), rgb(245, 255, 192));
    }
  }
  margin-top: 1500rpx;
}
/* 前台类目 */
.category {
  &.show {
    animation: showLayer 1s linear both;
  }

  &.hide {
    animation: hideLayer 1s linear both;
  }

  @keyframes showLayer {
    0% {
      transform: scale(0);
    }
    20% {
      transform: scale(0.2); //这里可以通过变大变小调整偏移量
    }
    40% {
      transform: scale(0.4); //这里可以通过变大变小调整偏移量
    }
    60% {
      transform: scale(0.6); //这里可以通过变大变小调整偏移量
    }
    80% {
      transform: scale(0.8); //这里可以通过变大变小调整偏移量
    }
    100% {
      transform: scale(1); //这里可以通过变大变小调整偏移量
    }
  }

  @keyframes hideLayer {
    0% {
      transform: scale(1);
    }
    20% {
      transform: scale(0.8); //这里可以通过变大变小调整偏移量
    }
    40% {
      transform: scale(0.6); //这里可以通过变大变小调整偏移量
    }
    60% {
      transform: scale(0.4); //这里可以通过变大变小调整偏移量
    }
    80% {
      transform: scale(0.2); //这里可以通过变大变小调整偏移量
    }
    100% {
      transform: scale(0); //这里可以通过变大变小调整偏移量
    }
  }
  z-index: 10;
  margin: 20rpx 0 0;
  padding: 10rpx 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  min-height: 328rpx;
  background-color: #fff;
  .category-item {
    // 加个阴影
    z-index: 99999;
    width: 150rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    box-sizing: border-box;
    font-size: 40rpx;
    .icon {
      width: 100rpx;
      height: 100rpx;
    }
    .text {
      font-size: 26rpx;
      color: #666;
    }
  }
}

/* 分类标题 */
.caption {
  display: flex;
  justify-content: center;
  line-height: 1;
  padding: 36rpx 0 40rpx;
  font-size: 32rpx;
  color: #262626;
  .text {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 28rpx 0 30rpx;

    &::before,
    &::after {
      content: '';
      width: 20rpx;
      height: 20rpx;
      background-image: url(@/static/images/bubble.png);
      background-size: contain;
      margin: 0 10rpx;
    }
  }
}

// 加载提示文字
.loading-text {
  text-align: center;
  font-size: 28rpx;
  color: #666;
  padding: 20rpx 0;
}
// 滑动的分类的样式
/**
 * 导航内容样式
 */
.nav-content {
  display: absolute;
  position: relative; /* 水平定位 */
  /* 垂直偏移 */
  background-color: #fff; /* 背景颜色 */
  width: 100%; /* 宽度占父元素的100% */
  height: 150rpx; /* 高度 */
  white-space: nowrap; /* 不换行 */
  padding: 0 10rpx; /* 内边距 */
  box-sizing: border-box; /* 盒模型 */
  margin-bottom: 20rpx; /* 底部外边距 */
  margin-right: 20rpx; /* 右侧外边距 */
}
.duoyu {
  // 背景颜色
  background-color: #faf8f8;
  // 给变成圆润
  border-radius: 2%;
}
.nav-item {
  // 导航栏项目样式

  width: 176rpx; // 宽度为176像素
  height: 120rpx; // 高度为100%
  display: inline-block; // 块元素显示为行内块元素
  // 实现带椭圆边框
  border-radius: 20%;
  //左边缘
  //阴影
  box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.3);

  border-top-left-radius: 20rpx;

  display: inline-flex; //  显示方式为行内弹性布局
  flex-direction: column; // 弹性布局主轴方向为列
  justify-content: center; // 弹性布局交叉轴上项目居中
  align-items: center; // 弹性布局行内项目居中
  color: #c5c5c5; // 字体颜色为#c5c5c5
  margin-bottom: 10rpx;
  margin-right: 10rpx; // 右外边距为10像素
  margin-top: 10rpx;
  text-align: center; // 文本内容居中对齐
}
.nav-item .text {
  font-size: 20rpx;
  color: #666;
  margin-top: 10rpx;
  margin-bottom: 10rpx;
}
.h1 {
  display: block;
  background-color: #fff;
}
.h2 {
  display: none;
}
.tutu {
  background-color: #fff;
}
// 抽屉
.close {
  padding: 10px;
}
// 话题最近更新
.huati {
  padding: 20rpx;
  font-size: 35rpx;
  color: #666;
  // 漂亮的样式
  &::before {
    content: '';
    width: 20rpx;
    height: 20rpx;
    background-image: url(@/static/images/bubble.png);
    background-size: contain;
    margin: 0 10rpx;
  }
  // 加点动态
  &::after {
    content: '';
    width: 20rpx;
    height: 20rpx;
    background-image: url(@/static/images/bubble.png);
    background-size: contain;
    margin: 0 10rpx;
  }
}
// 话题列表
.huatiliebiao {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 20rpx;
  .neiron {
    display: flex;
    flex-direction: row;
    flex-direction: column !important;
    flex: 1;
  }
  .huatixiam {
    display: flex;
    align-items: center;
    font-size: 30rpx;
    color: #6c757d;
  }
}
// 下拉的跳转
.yanse {
  color: #1e43b2;
  // 变成圆

  border-radius: 50%;
  margin-right: 15rpx;
}
.action {
}
.dis {
  display: none;
}
</style>
